<template>
    <div>
      <div class="title">--新手特权--</div>
      <div class="content">
        <div class="item-left">
          <h4>下载APP<span class="red">送888元礼包</span></h4>
          <p>新手专享</p>
          <img src="//img12.360buyimg.com/jrpmobile/jfs/t10384/155/1759179594/9776/185bd062/59e5f0ebNec4cf494.png?width=100&height=100">
        </div>
        <div class="item-right">
          <ul>
            <li>
              <div class="list-left">
              <h4>领128元新手礼包领128元新手礼包</h4>
              <p>立刻开通</p>
              </div>
              <img src="//img12.360buyimg.com/jrpmobile/jfs/t4639/162/1782623297/60754/98ea03b4/58e60952N7fdb2b85.png?width=200&height=200"></li>
            <li>
              <div class="list-left">
                <h4>打白条<span>享免息</span></h4>
                <p>立即开通享豪礼</p>
              </div>
              <img src="//img12.360buyimg.com/jrpmobile/jfs/t4804/179/657713323/5908/66dce262/58e6095fNd3dc3f39.png?width=100&height=100"></li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'homeNovice'
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/css/varibles.styl'
  @import '../../assets/css/mixins.styl'
  .title
    jdTitle()
  .content
    display:flex;
    .item-left
     text-align:center
     width:50%
     box-sizing:border-box
     padding:.32rem .2rem 0 .2rem
     border-right:1px solid #ddd
     h4
      font-size:.28rem
      font-weight:bold
      line-height:.7rem
      .red
       color:red
     p
      color:#999
      line-height:.4rem
     img
      width:1.32rem
      height:1.32rem
      margin-bottom:.2rem
   .item-right
     width:50%
     box-sizing:border-box
     overflow:hidden
     padding:.42rem 0 0 .2rem
     li
      width:100%
      height:1.46rem
      box-sizing:border-box
      &:first-child
          border-bottom: 1px solid #ddd
      &:last-child
        padding-top:.3rem
      .list-left
        max-width:66%
        float:left
        line-height:.5rem
       h4
         font-size:.28rem
         font-weight:bold
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
         color:red
         .red
           color:red
       p
         color:#999
     img
       width:.8rem
       height:.8rem
       float:right
</style>
